<template>
	<view class="page">
		<view class="top-bg" :class="isIndex?'arc':''" :style="{ 
			backgroundColor: isIndex?topBgImage.style.backgroundColor:'#ffffff',
			'background-image': `url(${topBgImage.src})` 
		}">
			<QS-Navbar :backgroundColor="stickyTopCompColor.bg" autoEmitQuery @emitQuery="emitQuery($event, 'navbar_1_height')" ref="navbar_1" :navbarItems="getNavbar1Items">
			</QS-Navbar>
			<view v-show="isIndex">
				<QS-Navbar :backgroundColor="stickyTopCompColor.bg" :navbarItems="getNavbar2Items" :fixed="false" :statusBar="false"></QS-Navbar>
			</view>
			<QS-Sticky 
			ref="sticky_1"
			:disabled="isIndex"
			:top="navbar_1_height + 'px'">
				<view 
				class="flex_row width-full" 
				:style="{ backgroundColor: stickyTopCompColor.bg }">
					<QS-Tabs ref="tabs1" autoEmitQuery @emitQuery="emitQuery($event, 'tabs_1_Height')" mode="scroll" :tabIndex="sortTabIndex" @click="sortTabIndex = $event;" theme="danger"
						:lineColor="stickyTopCompColor.color" 
						:activeColor="stickyTopCompColor.color"
						defFontSize="16px"
						activeFontSize="18px"
						:itemFull="true"
						:defColor="stickyTopCompColor.color" :lineUseSlot="true"
						:compStyle="{ container: { width: '592.5rpx' } }" width="100%" :tabs="sort1Tabs">
						<template 
						v-slot:line="{ currentTabInfo, lineColor }">
							<view class="tabs-line" :style="{
								top: currentTabInfo.height * 0.9 + 'px',
								left: (currentTabInfo.left + (currentTabInfo.width * 0.3)) + 'px',
								height: currentTabInfo.height * 0.1 + 'px',
								width: currentTabInfo.width * 0.4 + 'px',
								backgroundColor: lineColor
							}"></view>
						</template>
					</QS-Tabs>
					<view class="flex_row_c_c" style="width: 157.5rpx;" @tap="handlerAllSort">
						<QS-Icons type="home" :color="stickyTopCompColor.color"></QS-Icons>
						<QS-P width="15rpx"></QS-P>
						<text class="QS-text" :style="{ 
							fontSize: '16px',
							color: stickyTopCompColor.color 
						}">分类</text>
					</view>
				</view>
			</QS-Sticky>
			<view class="flex_column" v-show="isIndex">
				<QS-P height="32rpx"></QS-P>
				<QS-Gradient-Swiper ref="gradientSwiper" autoplay circular :height="gradientSwiperHeight"
					:hasBackgroundColor="false" @colorChange="gradientColorChange"></QS-Gradient-Swiper>
				<QS-P height="24rpx"></QS-P>
			</view>
		</view>
		<view class="page-content" v-show="isIndex">
			<QS-SuperComponent :res="res" @click="superComponentClick"></QS-SuperComponent>
		</view>
		<view class="flex_column bgColor_ffffff">
			<view v-if="isIndex">
				<!-- <QS-Sticky
				ref="sticky_2"
				zIndex="29"
				:top="(navbar_1_height) + 'px'"> -->
					<view class="flex_column">
						<QS-Tabs 
						ref="tabs2"
						autoEmitQuery
						@emitQuery="emitQuery($event, 'tabs_2_Height')"
						itemMinWidth="187.5rpx"
						backgroundColor="#ffffff"
						:props="sort2TabsProps"
						height="120rpx"
						:tabIndex="sort2TabIndex" 
						@click="sort2TabIndex = $event;" 
						:hasLine="false"
						activeFontBold="none"
						activeColor="#000000"
						type="columnBetweenText"
						:tabs="sort2Tabs">
						</QS-Tabs>
					</view>
				<!-- </QS-Sticky> -->
			</view>
			<swiper 
			v-show="isIndex"
			id="pageSwiper" 
			:current="sort2TabIndex" 
			:style="{ height: (sysInfo.windowHeight - navbar_1_height - tabs_2_height) + 'px' }"
			@animationfinish="sort2TabIndex = $event.detail.current">
				<swiper-item v-for="(item, index) in sort2Tabs" :key="index">
					<scroll-view :scroll-y="icanScroll" class="height_full" @scrolltolower="getList(index)">
						<view>
							<QS-Masonry ref="QSMasonry" type="index-1" col="2" padding="0 25rpx" colSpace="20rpx" itemSpace="20rpx"></QS-Masonry>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view v-show="!isIndex" :style="{ 'min-height': (sysInfo.windowHeight - navbar_1_height - tabs_1_Height) + 'px' }">
				<QS-Masonry ref="QSMasonry_2" type="index-1" col="2" padding="25rpx" colSpace="20rpx" itemSpace="20rpx"></QS-Masonry>
			</view>
		</view>
		<view class="sortPopupBox" :style="{ top: navbar_1_height + 'px' }">
			<QS-Popup 
			ref="sortPopup" 
			type="fadeInDown" 
			zIndex="31" 
			paddingRow="0" 
			paddingCol="0"
			@show="sortAllShow = true;"
			@hide="sortAllShow = false;">
				<view class="sortAll-box">
					<text class="QS-text large weight">全部分类</text>
					<QS-P height="30rpx"></QS-P>
					<view class="flex_row flex-wrap_wrap">
						<view class="sort-all-item" v-for="(item, index) in sort1Tabs" :key="index" @tap="sortTabIndex = index;hideAllSort();">
							<text class="QS-text" :style="{ color: sortTabIndex == index?'#CB7D21':'' }">{{item.name}}</text>
						</view>
					</view>
				</view>
			</QS-Popup>
		</view>
		<QS-BackTop tabbar @backTop="backTopCallback" zIndex="48"></QS-BackTop>
	</view>
</template>

<script>
	import mock from './mock.js';
	
	function setBackgroundColor(c) {
		// #ifdef MP-WEIXIN
		uni.setBackgroundColor(c)
		// #endif
	}
	
	export default {
		data() {
			return {
				gradientSwiperHeight: uni.upx2px(350),
				sortTabIndex: 0,
				sort2TabIndex: 0,
				sort2TabsProps: {
					columnBetweenActiveBgColor: '#F52F50',
					columnBetweenLineColor: '#f2f2f2'
				},
				topBgImage: {
					src: '',
					style: {
						backgroundColor: '#f7f7f7',
						height: '500px'
					}
				},
				sort1Tabs: [],
				sort2Tabs: [],
				res: {},
				navbar_1_height: 64,
				tabs_1_Height: 30,
				tabs_2_height: uni.upx2px(120),
				
				pageBotlist: [],
				
				sortAllShow: false,
				
				sysInfo: uni.$qs.getSys(),
				
				icanScroll: false,
				
				navbar1Items: [],
				navbar2Items: [],
				
				initedSwiperObs: false,
				intersectionRatio: 0
			}
		},
		computed: {
			isIndex() {
				return this.sortTabIndex == 0;
			},
			stickyTopCompColor() {
				const obj = {};
				let bl = this.QS_scrollTop > 44 || !this.isIndex || this.sortAllShow;
				if (bl) {
					obj.bg = '#ffffff';
					obj.color = '#000000';
				} else {
					obj.bg = '';
					obj.color = '#ffffff';
				}
				return obj;
			},
			getNavbar1Items() {
				const stickyTopCompColor = this.stickyTopCompColor;
				const arr = JSON.parse(JSON.stringify(this.navbar1Items));
				for(let i = 0; i < arr.length; i++) {
					const item = arr[i];
					if(['text', 'icon', 'dyc-icon'].includes(item.type)) {
						item.color = stickyTopCompColor.color;
						item.iconColor = stickyTopCompColor.color;
					}
				}
				return arr
			},
			getNavbar2Items() {
				const stickyTopCompColor = this.stickyTopCompColor;
				const arr = JSON.parse(JSON.stringify(this.navbar2Items));
				for(let i = 0; i < arr.length; i++) {
					const item = arr[i];
					if(['text', 'icon', 'dyc-icon'].includes(item.type)) {
						item.color = stickyTopCompColor.color;
						item.iconColor = stickyTopCompColor.color;
					}
				}
				return arr
			}
		},
		watch: {
			sortTabIndex(n) {
				if(!this.isIndex) 
					setBackgroundColor({
						backgroundColor: '#ffffff'
					})
				else
					setBackgroundColor({
						backgroundColor: this.topBgImage.style.backgroundColor
					})
				
				this.$nextTick(()=>{
					if(!this.isIndex) this.getList_2(n);
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					})
				})
			},
			sort2TabIndex(n) {
				this.getList(n);
			}
		},
		onReady() {
			this.sysInfo = uni.$qs.getSys();
			this.initPageData();
		},
		onReachBottom() {
			if(this.isIndex) this.icanScroll = true;
			if(!this.isIndex) this.getList_2(this.sortTabIndex);
		},
		methods: {
			emitQuery(data, name) {
				this[name] = data.height;
			},
			pullDownRefreshFn() {
				return new Promise(rs=>rs())
			},
			async initPageData() {
				const data = mock; 	//请求到的数据
				
				this.navbar1Items = data.navbar1Items;
				this.navbar2Items = data.navbar2Items;
				
				await new Promise(rs=>this.$nextTick(rs));
				console.log('refs', this.$refs);
				this.topBgImage = data.topBgImage;
				this.res = data.res;
				this.sort1Tabs = data.sort1Tabs;
				this.sort2Tabs = data.sort2Tabs;
				this.sort2TabsProps = data.sort2TabsProps
				
				await new Promise(rs=>this.$nextTick(rs));
				
				this.$refs.gradientSwiper.setData(data.topSwiperData);
				this.getList(this.sort2TabIndex);
				
				if(!this.initedSwiperObs) {
					this.initedSwiperObs = true;
					this.initSwiperObs();
				}
				
				// 保证tabs1线条能出现
				setTimeout(()=>{
					this.$refs.tabs1.getContainerWidth();
				}, 3000);
			},
			initSwiperObs() {
				uni.$qs.intersectionObserver({
					vm: this,
					offsetTop: 0,
					nodes: '#pageSwiper',
					options: {
						thresholds: [ .95, .96, .97, .99]
					},
					intersectionComplate:(res)=>{
						if(res.intersectionRatio > this.intersectionRatio) {
							this.icanScroll = true;
						}else{
							this.icanScroll = false;
						}
						this.intersectionRatio = res.intersectionRatio;
					}
				});
			},
			gradientColorChange(e) {
				if (!this.topBgImage.src) {
					this.topBgImage.style.backgroundColor = e;
					if(this.isIndex)
						setBackgroundColor({
							backgroundColor: e
						})
				}
			},
			test() {
				uni.$store.dispatch('setPageBackgroundColor', '#f1505c');
			},
			getList(index) {
				const l = this.sort2Tabs[index].list.length;
				const data = Array(10).fill('').map((item, index)=>{
					const curInd = l + index;
					return {
						name: (curInd % 3 === 0?`测试-${curInd} 长标题长标题长标题长标题`:`测试标题${curInd}`),
						type: (curInd % 7 === 0?`ad`:``),
						integral: 100 + curInd,
						index: curInd,
						num: 10+curInd,
						img: ''
					}
				})
				this.$refs.QSMasonry[index].add(data);
				this.sort2Tabs[index].list = this.sort2Tabs[index].list.concat(data);
			},
			getList_2(index) {
				const l = this.pageBotlist.length;
				const data = Array(10).fill('').map((item, index)=>{
					const curInd = l + index;
					return {
						name: (curInd % 3 === 0?`测试-${curInd} 长标题长标题长标题长标题`:`测试标题${curInd}`),
						type: (curInd % 7 === 0?`ad`:``),
						integral: 100 + curInd,
						index: curInd,
						num: 10+curInd,
						img: ''
					}
				})
				this.$refs.QSMasonry_2.add(data);
				this.pageBotlist = this.pageBotlist.concat(data);
			},
			handlerAllSort() {
				if(this.sortAllShow) this.hideAllSort();
				else this.showAllSort();
			},
			showAllSort() {
				this.$refs.sortPopup.show();
			},
			hideAllSort() {
				this.$refs.sortPopup.hide();
			},
			backTopCallback() {
				setTimeout(()=>{
					this.$refs.sticky_1.setFixed(false);
					// this.$refs.sticky_2.setFixed(false);
				}, 320)
			},
			
			superComponentClick() {
				const item = arguments[0];
				console.log('superComponentClick')
				console.log(item);
				uni.$qs.toast('点击了')
			}
		}
	}
</script>

<style scoped>
	.top-bg{
		/* #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO */
		transition: background-color .3s;
		/* #endif */
	}
	
	.tabs-line {
		position: absolute;
		border-radius: 10rpx;
		transition: left .3s;
	}

	.arc {
	/* 	border-bottom-left-radius: 50% 8rpx;
		border-bottom-right-radius: 50% 8rpx; */
		overflow: hidden;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
	}

	.page-content {
		margin-top: -8rpx;
		background-color: #F7F7F7;
	}
	
	.sortPopupBox{
		position: fixed;
		transform: translate(0);
		width: 100%;
		z-index: 50;
	}
	
	.sortAll-box{
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 20rpx 25rpx;
		border-radius: 0 0 30rpx 30rpx;
	}
	
	.sort-all-item{
		padding: 9rpx 36rpx;
		background-color: #F2F2F2;
		margin-right: 32rpx;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 100px;
	}
</style>
